<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点哏儿后台管理</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="layui/layui.js"></script>
    <script src="layui/lay/modules/layer.js"></script>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="layui/css/modules/layer/default/layer.css">
</head>
<body>
<div id="searchDiv" style="display: flex;justify-content: flex-start;margin-top: 8px;width: 90%">
    <div class="layui-form-item" style="width: 40%">
        <label style="width: 42px;margin-right: 0" class="layui-form-label">关键词</label>
        <div class="layui-input-block" style="margin-left: 72px">
            <input id="search_content" type="text" name="title" required lay-verify="required"
                   placeholder="类型/被操作对象类型/被操作对象名称/管理员姓名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="padding: 0;margin: 0;width: 20%">
        <label style="width: 56px;margin-right: 0" class="layui-form-label">起始日期</label>
        <div class="layui-input-block" style="margin-left: 86px">
            <input name="adate" type="text" class="layui-input" id="test1">
        </div>
    </div>

    <div class="layui-form-item" style="width: 20%">
        <label style="width: 56px;margin-right: 0" class="layui-form-label">截至日期</label>
        <div class="layui-input-block" style="margin-left: 86px">
            <input name="ddate" type="text" class="layui-input" id="test2">
        </div>
    </div>

    <div class="layui-form-item" style="width: 20%">
        <div class="layui-input-block" style="margin-left: 10px">
            <button class="layui-btn" data-type="reload">搜索</button>
        </div>
    </div>

</div>
<table id="demo" lay-filter="test"></table>
<script>
    layui.use('table', function () {
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo'
            , height: 500
            , url: 'FindAllRecordList' //数据接口
            , cols: [[ //表头
                {field: 'record_id', title: '编号', width: 80, align: 'center', sort: true, fixed: 'left'}
                , {field: 'record_type', title: '操作类型', sort: true}
                , {field: 'manager_name', title: '管理员', sort: true}
                , {field: 'record_datetime', title: '操作时间', sort: true}
                , {field: 'record_object', title: '操作对象', sort: true}
                , {field: 'record_before', title: '操作之前'}
                , {field: 'record_after', title: '操作之后', sort: true}
                , {field: 'record_object_name', title: '操作对象名称'}
                , {field: 'record_remarks', title: '操作备注'}
            ]]
            , id: 'testReload'
            , page: true //开启分页
        });

        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#search_content');
                var adate = $('#test1');
                var ddate = $('#test2');
                //执行重载
                table.reload('testReload', {
                    url: 'searchRecord'
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        title: demoReload.val(),
                        adate: adate.val(),
                        ddate: ddate.val()
                    }
                });
            }
        };
        $('#searchDiv .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


        table.on('tool(test)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            //加入黑名单
            if (layEvent === 'lahei') { //删除
                layer.confirm('确定将 ' + data.manager_name + ' 加入黑名单吗？', function (index) {
                    var status = 1;
                    if (data.manager_status == 1) {
                        status = -1
                    } else {
                        status = 1;
                    }
                    //   tr.find(".laytable-cell-1-productID").html()
                    //向服务端发送删除指令
                    $.ajax({
                        type: "post",
                        url: "lahei",
                        data: {"manager_id": data.manager_id, "status": status},
                        success: function (res) {
                            if (res.code == 1) {
                                layer.close(index);
                                if (res.newStatus == 1) {
                                    layer.msg("已恢复成功！", {icon: 1});
                                } else {
                                    layer.msg("加入黑名单成功！", {icon: 1});
                                }

                                obj.update({
                                    manager_status: status,
                                    lahei: status
                                });
                            } else {

                                layer.msg("发生错误！", {icon: 5})
                            }
                        }
                    });
                    layer.close(index);
                });
            }
            //删除
            if (layEvent === 'shanchu') { //删除
                layer.confirm('确定将 ' + data.manager_name + ' 删除吗？', function (index) {
                    //向服务端发送删除指令
                    $.ajax({
                        type: "post",
                        url: "shanchu",
                        data: {"manager_id": data.manager_id},
                        success: function (res) {
                            if (res.code == 1) {
                                layer.close(index);
                                layer.msg("删除成功！", {icon: 1});
                                obj.del();
                            } else {
                                layer.msg("发生错误！", {icon: 5})
                            }
                        }
                    });
                    layer.close(index);
                });
            }
        });
    });
</script>

<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function (data) {
        });
    });
</script>

<script type="text/html" id="lahei">
    <a href="javascript:;" class="layui-table-link">拉黑/恢复</a>
</script>
<script>
    //回车事件绑定
    $('#search_content').bind('keyup', function (event) {
        if (event.keyCode == "13") {
            //回车执行查询
            $('#searchDiv .layui-btn').click();
        }
    });
</script>

<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#test1' //指定元素
        });
        laydate.render({
            elem: '#test2' //指定元素
        });
    });
</script>

<script type="text/html" id="status">
    {{#  if(d.manager_status ==1){ }}
    正常
    {{#  } }}
    {{#  if(d.manager_status ==-1){ }}
    <span style="color: red"> 黑名单</span>
    {{#  } }}
</script>

<script type="text/html" id="indexID">
    {{ d.LAY_INDEX }}
</script>
<script type="text/html" id="role">
    <a href="FindObjectManagerRolers_page?manager_id={{d.manager_id}}" class="layui-table-link">查看角色</a>
</script>

<script type="text/html" id="shanchu">
    <a href="javascript:;" class="layui-table-link">删除</a>
</script>
<script type="text/html" id="weihu">
    <a href="findManagerInfo?manager_id={{d.manager_id}}" class="layui-table-link">维护</a>
</script>
</body>
</html>